<template>
  <view class="container">
    <view style="margin-top: 120rpx;"></view>
    <nav-bar :title="productId ? '编辑产品' : '新增产品'" />

    <uni-forms ref="form" :model="formData" :rules="rules">
      <uni-forms-item label="产品名称" name="name" required>
        <uni-easyinput v-model="formData.name" placeholder="请输入产品名称" />
      </uni-forms-item>
      
      <uni-forms-item label="价格" name="price" required>
        <uni-easyinput 
          v-model="formData.price" 
          placeholder="请输入价格" 
          type="number"
        />
      </uni-forms-item>
      
      <uni-forms-item label="材料扣费类型" name="charge_type">
        <view class="radio-group">
          <radio-group @change="chargeTypeChange">
            <label class="radio-item">
              <radio value="1" :checked="formData.charge_type == 1" />
              <text>固定金额</text>
            </label>
            <label class="radio-item">
              <radio value="2" :checked="formData.charge_type == 2" />
              <text>比例扣费</text>
            </label>
          </radio-group>
        </view>
      </uni-forms-item>
      
      <uni-forms-item :label="formData.charge_type == 1 ? '材料扣费金额' : '材料扣费比例(%)'" name="charge_value">
        <uni-easyinput 
          v-model="formData.charge_value" 
          :placeholder="formData.charge_type == 1 ? '请输入材料扣费金额' : '请输入材料扣费比例，如15表示15%'" 
          type="number"
        />
      </uni-forms-item>
      
      <uni-forms-item label="描述" name="description">
        <uni-easyinput 
          v-model="formData.description" 
          placeholder="请输入产品描述" 
          type="textarea"
        />
      </uni-forms-item>
      
      <button type="primary" @click="submitForm">保存</button>
    </uni-forms>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
import productApi from '@/utils/product.js'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      productId: '',
      storeId: '',
      formData: {
        name: '',
        price: '',
        description: '',
        charge_type: 1,
        charge_value: ''
      },
      rules: {
        name: {
          rules: [{
            required: true,
            errorMessage: '请输入产品名称'
          }]
        },
        price: {
          rules: [{
            required: true,
            errorMessage: '请输入价格'
          }, {
            pattern: '^\\d+(\\.\\d{1,2})?$',
            errorMessage: '请输入有效的价格，最多两位小数'
          }]
        }
      }
    }
  },
  onLoad(options) {
    this.productId = options.product_id
    this.storeId = options.store_id
    
    if (this.productId) {
      this.getProductDetail()
    }
  },
  methods: {
    chargeTypeChange(e) {
      this.formData.charge_type = parseInt(e.detail.value)
      // 切换类型时清空扣费值
      this.formData.charge_value = ''
    },
    async getProductDetail() {
      try {
        const res = await productApi.getById(null,this.productId)
        this.formData = {
          name: res.name,
          price: res.price,
          description: res.description || '',
          charge_type: res.charge_type || 1,
          charge_value: res.charge_type === 2 ? (res.charge_value * 100 || '') : (res.charge_value || '')
        }
      } catch (error) {
        uni.showToast({
          title: '获取产品信息失败',
          icon: 'none'
        })
      }
    },
    async submitForm() {
      try {
        await this.$refs.form.validate()
        
        const submitData = {
          ...this.formData,
          store_id: this.storeId,
          product_id: this.productId,
          price: parseFloat(this.formData.price),
          charge_type: parseInt(this.formData.charge_type),
          charge_value: this.formData.charge_type == 2 ? 
            parseFloat(this.formData.charge_value) / 100 : 
            parseFloat(this.formData.charge_value)
        }
        
        if (this.productId) {
          await productApi.update(submitData)
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          })
        } else {
          await productApi.create(submitData)
          uni.showToast({
            title: '新增成功',
            icon: 'success'
          })
        }
        
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        uni.showToast({
          title: error.message || '操作失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style>
.container {
  padding: 0 30rpx;
  background-color: #f5f5f5;
}

uni-forms {
  margin: 0 -30rpx;
  padding: 20rpx 30rpx;
  background-color: #fff;
}

.radio-group {
  display: flex;
  flex-direction: row;
}

.radio-item {
  margin-right: 30rpx;
  display: flex;
  align-items: center;
}
</style>